<template>
  <el-dialog
    :visible.sync="isshowlogin"
    width="20%"
    center
    :before-close="handleClose"
  >
    <div class="loginContent">
      <div class="logImage">
        <img src="../assets/logo.jpg" alt="登入" />
      </div>
      <el-form ref="form" :rules="rules" :model="userLogin">
        <el-form-item prop="phone">
          <el-input
            class="phone"
            placeholder="请输入网易云账号登入"
            v-model="userLogin.phone"
          >
            <i slot="prefix" class="iconfont icon-phone"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            class="password"
            placeholder="请输入密码"
            v-model="userLogin.password"
            show-password
          >
            <i slot="prefix" class="iconfont icon-pwd"></i>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <el-button class="btn" type="primary" @click="toLogin">登录</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value || !value.trim()) {
        callback(new Error("请输入网易账号"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value || !value.trim()) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      rules: {
        phone: [{ validator: validatePhone, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
      userLogin: {
        phone: null,
        password: null,
      },
    };
  },
  computed: {
    ...mapState({
      isshowlogin: (state) => state.user.loginDialogVisible,
    }),
  },
  methods: {
    ...mapActions(["loginAction"]),
    ...mapMutations(["setLoginDialog"]),
    // 登入框关闭前
    handleClose() {
      this.$refs.form.resetFields();
      this.$emit("changeIslogin", false);
      this.setLoginDialog(false);
    },
    // 提交登入
    toLogin() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const { phone, password } = this.userLogin;
          try {
            await this.loginAction({ phone, password });
            this.$refs.form.resetFields();
            this.$emit("changeIslogin", false);
            this.setLoginDialog(false);
            this.$message({
              message: "登录成功",
              type: "success",
            });
          } catch (err) {
            console.log(err);
            this.$message.error("登录失败,请重新输入");
          }
        }
      });
    },
  },
  beforeDestroy() {
    if (this.$refs.form) {
      this.$refs.form.resetFields();
    }
  },
};
</script>

<style lang="less" scoped>
// 登入开始
.el-dialog__body {
  position: relative;
}

// .loginContent {
//   padding: 25px 25px 0px;
// }

.logImage {
  margin-bottom: 50px;
}
.phone.el-input {
  width: 100%;
  outline: none;
  .el-input__prefix {
    i {
      display: inline-block;
      height: 100%;
      line-height: 40px;
    }
  }
}
.password.el-input {
  outline: none;
  .el-input__prefix {
    i {
      display: inline-block;
      height: 100%;
      line-height: 40px;
    }
  }
}
.dialog-footer {
  &::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
    width: 100%;
    height: 170px;
    opacity: 0.3;
    background: url("../assets/login_bg2.jpg") center bottom no-repeat;
    background-size: contain;
  }
  .el-button {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin-bottom: 100px;
  }
}
// 登入结束
</style>
